<template>
  <div id="samstoSpecboxList">
    <div class="">
      <div class='area'>
<!--        <vxe-toolbar perfect>-->
<!--          <template #buttons>-->
<!--            <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup.enter.native="findList" @search-click="findList" @clear="findList"></vxe-input>-->

<!--            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="选择标本盒"-->
<!--                        @click="addMethod"></vxe-button>-->
<!--          </template>-->
<!--        </vxe-toolbar>-->
        <vxe-toolbar perfect class-name="history-top-tool-box">
          <template #buttons>
            <vxe-form :data="form" title-align="right" title-colon>
              <vxe-form-item title="条码号">
                <template #default="{ data }">
                  <vxe-input v-model="data.reqNo" clearable @clear="findSpecSamplingHistoryList()"></vxe-input>
                </template>
              </vxe-form-item>

              <vxe-form-item title="状态是否满">
                <template #default="{ data }">
                  <vxe-select v-model="data.isSign" @change="findSpecSamplingHistoryList">
                    <vxe-option v-for="(item, index) in signState" :key="index" :value="item.value" :label="item.label"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item title="科室" >
                <template #default="{ data }">
                  <vxe-select v-model="data.isSign" @change="findSpecSamplingHistoryList">
                    <vxe-option v-for="(item, index) in signState" :key="index" :value="item.value" :label="item.label"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item title="仓库">
                <template #default="{ data }">
                  <vxe-select v-model="data.isSign" @change="findSpecSamplingHistoryList">
                    <vxe-option v-for="(item, index) in signState" :key="index" :value="item.value" :label="item.label"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item title="位置">
                <template #default="{ data }">
                  <vxe-select v-model="data.isSign" @change="findSpecSamplingHistoryList">
                    <vxe-option v-for="(item, index) in signState" :key="index" :value="item.value" :label="item.label"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item>
                <template #default>
                  <vxe-button class-name="margin-left-sm" icon="vxe-icon-search" type="text" class="button-blue" content="查询" @click="findSpecSamplingHistoryList"></vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </template>
        </vxe-toolbar>
        <div class="tableBox">
          <el-container>
            <el-header id='boxHeader'></el-header>


            <el-main class='boxmain'>
              <el-container>
                <el-aside width="21px">第一层</el-aside>
                <el-main>
                  <el-row>
                    <el-col :span="8" >
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="">9*10(满)</el-button>
                    </el-col>
                  </el-row>
                </el-main>
              </el-container>
            </el-main>
            <el-main class='boxmain'>
            <el-container>
            <el-aside width="21px">第二层</el-aside>
            <el-main >
              <el-row>
                <el-col :span="8" >
                  <el-button type="">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
              </el-row>
            </el-main>
            </el-container>
            </el-main>
            <el-main class='boxmain'>
            <el-container>
            <el-aside width="21px">第三层</el-aside>
            <el-main >
              <el-row>
                <el-col :span="8" >
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
              </el-row>
            </el-main>
            </el-container>
            </el-main>
            <el-main class='boxmain'>
            <el-container>
            <el-aside width="21px">第四层</el-aside>
            <el-main >
              <el-row>
                <el-col :span="8" >
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary">9*10(满)</el-button>
                </el-col>
              </el-row>
            </el-main>
            </el-container>
            </el-main>
            <el-footer id='boxFooter'></el-footer>
          </el-container>
        </div>
      </div>

      <el-drawer
        v-model="drawer"
        title="架层信息">

        <SamstoSpecboxForm ref="samstoSpecboxFormRef"
                           :currentRow="curSelectRow"
                           @findList="findList" />

      </el-drawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, PropType } from 'vue';
import { VxeColumnPropTypes, VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance} from 'vxe-table';
import { AppStore } from '@/stores/store';
import SamstoSpecboxForm from "../form/SamstoSpecboxForm.vue";
import {  IsEmpty,getAssetsFile } from '@/utils/common';
import {
  samstoSpecboxPagelist,
  samstoSpecboxDelete
} from '@/views/lab_sys/samsto_set/apis/samsto_api';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const tableHard = reactive(["#","A","B","C","D","E","F","G","H","I"]); //表格数据
const curSelectRow = ref({});
const pCurSelectRow = ref({});
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
let tableHeight = ref(window.innerHeight - 235);
const drawer = ref(false)
// 右侧表单:
const samstoSpecboxFormRef = ref<InstanceType<typeof SamstoSpecboxForm>>(); //基本信息表单标记ref
const activeName = ref('infoForm');
const infoTabPaneDisabled = ref(true);

</script>
<style lang="scss" scoped>
#samstoSpecboxList {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .hand-cursor {
      cursor: pointer; /* 鼠标指针在元素上时显示为手指形状 */
    }
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding:0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding:15px;
            height:calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent{
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  #boxHeader
  {
    border-color: #bfb8b8;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:none;
    border-left-style:solid;
    background-color: #bfb8b8 !important;
    height: 8px !important;
  }
  .boxmain
  {
    border-color: #bfb8b8;
    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    .el-button{
      margin: 3px;
    }
  }
  #boxFooter
  {
    border-color: #bfb8b8;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid ;
    border-left-style:solid;
    background-color:#bfb8b8 !important;
    height: 8px !important;
  }
  .el-aside {
    background-color: #ffffff !important;
    color: #22c3dc;
    font-weight: bolder;
    text-align: center;
  }
}
</style>

